<template>
	<view class="container">
		<view class=" info_contain">
			<view class="info_part">
				<image src="../../static/img/detailInfo/detailavatar.png" mode=""></image>
				<view class="">
					<view class="name">
						时光荏苒流
					</view>
					<view class="age">
						成都 /21岁
					</view>
				</view>
			</view>
		
			<view class="content">
				国产手机就是垃圾，一点都把好用，用半年就卡的要死，还是苹果好用，支持苹果手机，支持美国。
			</view>
			
		</view>
		<Blank></Blank>
		
		<view class="tag">
			<view class="top">
				<view class="yellow_line">
		
				</view>
				<view class="title">
					举报类型
				</view>
		
			</view>
			<view class="tag_list">
				<view class="tags" :class="twoActiveIndex==index?'active_tag':''" v-for="(item,index) in  holidayList" @click="selectTagTwo(index)">
					{{item}}
				</view>
			</view>
		
		
		</view>
		<view class="tag">
			<view class="top">
				<view class="yellow_line">
				</view>
				<view class="title">
					请填写举报理由
				</view>
				<view class="beizhu">
					(选填)
				</view>
			</view>
			<textarea value="" placeholder="请描述理由不超过200字" placeholder-style="font-size28rpx;color:#BBBBBB" maxlength="200" />
		
		</view>
		
		<HandleBtn btnName="确认选择" class="bottom_btn"></HandleBtn>
	</view>
</template>

<script>
	import Blank from "../../components/blank.vue"
	import HandleBtn from "../../components/handleBtn.vue"
	export default {
		components:{
			Blank,
			HandleBtn
		},
		data() {
			return {
				holidayList: ['垃圾营销', "涉黄信息", "不实信息", "人身攻击", "泄露隐私", "有害信息", "内容有害","违法信息","诈骗信息",'恶意营销'],
			
				twoActiveIndex:0,
				
			}
		},
		methods: {
		
			selectTagTwo(index){
				this.twoActiveIndex=index;
			}
			
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		margin-bottom: 100rpx;
	}
	.top {
		display: flex;
		align-items: center;
		margin-bottom: 38rpx;
		margin-top: 42rpx;
	}
	
	.yellow_line {
		width: 10rpx;
		height: 35rpx;
		background-color: #fd9103;
		border-radius: 50rpx;
		margin-right: 10rpx;
	}
	
	.title {
		font-size: 34rpx;
		color: #323232;
	}
	
	.beizhu {
		font-size: 28rpx;
		color: #BBBBBB;
	}
	.tag{
		margin:0 20rpx;
	}
	.tag_list{
		display: flex;
		flex-wrap: wrap;
	}
	.tags{
		font-size: 28rpx;
		color:#333333;
		width:160rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 7rpx;
		border:3rpx solid #fb8408;
		margin-right: 16rpx;
		margin-bottom: 30rpx;
	}
	.active_tag{
		background-color: #FCA601;
		border:none;
	}
	.info_contain{
		margin:40rpx 30rpx 0;
	}
	.info_part{
		display: flex;
		align-items: center;
	}
	.info_part image{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}
	.info_part .name{
		font-size: 32rpx;
		color: #363636;
	}
	.info_part .age{
		font-size: 24rpx;
		color: #A3A2A2;
	}
	.content{
		font-size: 28rpx;
		color: #363636;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
	}
	textarea{
		width:100%;
		min-height: 316rpx;
		padding:24rpx;
		box-sizing: border-box;
		background-color: #f5f4f6;
		font-size: 28rpx; 
	}
	.bottom_btn{
		margin-top: 60rpx;
	}
	

</style>
